<template>
  <div class="project-table-content">
    <div class="project-table-content-title">
      <span>{{ title }}</span>
      <span>
        <!-- <i><Plus /></i>
        <i>添加车辆</i> -->
      </span>
    </div>
    <Table class="task-table" v-bind="{ ...tableOptions }">
      <template v-for="slot in Object.keys(slots)" #[slot]="item">
        <slot :name="slot" v-bind="item"></slot>
      </template>
    </Table>
    <div v-show="isEdit && !isHidden" class="project-table-content-btn">
      <el-button typ="primary" @click="addHandler">新增</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useSlots, watch, ref } from "vue";
import Table from "@/components/Table/index.vue";
// 变量
const slots = useSlots();
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  tableOptions: {
    type: Object,
    default: () => {}
  },
  isEdit: {
    type: Boolean,
    default: false
  },
  isHidden: {
    type: Boolean,
    default: false
  }
});
let tableOptions = ref(props?.tableOptions);
watch(
  () => props.isEdit,
  val => {
    tableOptions.value.columns = tableOptions.value.columns.map(item => {
      if (item.key === "actionOptions") item.isHidden = !val;
      return item;
    });
  },
  {
    immediate: true
  }
);
watch(
  () => props.tableOptions.data,
  val => {
    tableOptions.value.data = val;
  },
  {
    immediate: true
  }
);

// 方法
const addHandler = () => {
  let obj = {};
  tableOptions.value.columns
    .filter(item => item.key != "actionOptions")
    .forEach(item => {
      if (item.key) obj[item.key] = "";
    });
  tableOptions.value.data.push(obj);
};
defineExpose({
  getValue: () => {
    return tableOptions.value.data;
  }
});
</script>
<style lang="scss" scoped>
.project-table-content {
  &-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    span:first-child {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
    }
    span:last-child {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 600;
      color: #333333;
      cursor: pointer;
      i:first-child {
        width: 15px;
        height: 15px;
        margin-right: 2px;
        font-size: 15px;
        color: #666666;
      }
    }
    &:hover {
      span:last-child {
        color: $primary-color;
        i {
          color: $primary-color;
        }
      }
    }
  }
  :deep(.el-input),
  :deep(.el-textarea) {
    .el-input__wrapper {
      cursor: default;
      background: $project-background;
      box-shadow: none;
      .el-input__inner {
        width: 100%;
        cursor: default;
      }
    }
    .el-textarea__inner {
      cursor: default;
      resize: none;
      background: $project-background;
      box-shadow: none;
    }
  }
  :deep(.el-date-editor) {
    width: 100%;
  }

  // .task-table {
  :deep(.task-table) {
    .wik-table-header {
      background: $project-background;
    }
    .el-input__wrapper {
      height: 32px;
      line-height: 32px;
    }
    .task-table-del {
      cursor: pointer;
      &:hover {
        color: #ff0000;
      }
    }
    .wik-table-row-item-other {
      &:hover {
        background: none;
      }
    }
    .wik-table-row-hover {
      &:hover {
        background: none;
      }
    }
  }

  // }
  &-btn {
    width: 100%;
    margin-top: 10px;
    .el-button {
      width: 100%;
    }
  }
}
</style>
